// 首先把所有的图片地址保存在一个数组中
var 图片地址列表 = [
    "./cat.jpg",
    "./cow.jpg",
    "./crow.jpg",
    "./dog.jpeg",
    "./dola.jpg",
//    "./不存在的图.jpg",
//    "./不存在的图.jpg",
//    "./不存在的图.jpg",
//    "./不存在的图.jpg",
//    "./不存在的图.jpg"
]

// 定义一个变量，记录当前是显示的哪张图，记录数组的下标即可
var currentIndex = 0

function 显示图片() {
    // 1. 根据下标，取出地址
    var source = 图片地址列表[currentIndex]

    // 2. 更新 <img> 的 src 属性
    // 2.1 先找到 <img> 元素
    var oImg = document.querySelector('img')
    // 2.2 更新 src 属性
    oImg.src = source

    // 3. 让图片下标指向下一个位置，如果越界了，要循环回来
    currentIndex += 1
    if (currentIndex === 图片地址列表.length) {
        currentIndex = 0
    }
}

function 显示图片一会儿之后切到下一张() {
    显示图片()

    setTimeout(显示图片一会儿之后切到下一张, 2000)    // 每张图保留 5 秒

        // 真实中动画不会这么做，因为这样的性能非常差！！
//      setTimeout(显示图片一会儿之后切到下一张, 1000 / 25)  // 模拟动画 1 秒 25 帧
                                                // 1000毫秒显示 25 次
                                                // 每多少毫秒显示 1 次？
                                                // 1000 / 25
}

显示图片一会儿之后切到下一张()    // 一开始就进入轮播图的形态